<template>
	<view class="content">
		<tab ref="tab" @tabChange="tabChange" :list="tabList"></tab>
		
		<view class="record-list">
			<view class="record-item" v-for="item in tabList[active].list" @tap="toTaobao(item)" :key="item.id">
				<view class="top">
					<view class="left">
						<view class="title">{{ item.remark }}</view>
						<view class="time">{{ item.createTime }}</view>
						<view class="trade" v-if="item.type != 1 && item.type != 2 && item.tradeNo">交易号：{{ item.tradeNo.substring(8, item.tradeNo.length) }}</view>
					</view>
					<view class="right">
						<text class="step" v-if="item.type === 1">{{ Number(item.consume) > 0 ? '+' + item.consume : item.consume }}步</text>
						<view class="cion" v-else-if="item.type === 2">
							<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200910/2e767550-f306-11ea-bc7d-134589f3ede3.png"></image>
							<text>{{ Number(item.consume) > 0 ? ('+' + item.consume) : item.consume }}</text>
						</view>
						<view class="cash" v-else>
							<view class="amount">{{ '¥' + item.amount }}</view>
							<view class="status ing">{{ item.status | statusFilter }}</view>
						</view>
					</view>
				</view>
				<view class="reason" v-if="item.reason">{{ item.reason }}</view>
			</view>
		</view>
		<!-- 加载中插件 -->
		<view class="load-status">
			<load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
			 :contentText="contentText"></load-more>
			<load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
			<empty v-if="tabList[active].empty" emptyText="暂无相关记录~" emptyType="record"></empty>
		</view>
	</view>
</template>

<script>
	import Tab from '@/components/Tab';
	import Empty from "@/components/Empty";
	import Skeleton from '@/components/uni/Skeleton';
	import LoadMore from "@/components/uni/LoadMore";
	import loader from '@/utils/mixin/loader';
	
	export default {
		name: 'record',
		mixins: [loader],
		components: {
			Tab,
			LoadMore,
			Empty,
			Skeleton
		},
		onLoad() {
			this.initPage();
			
			uni.reportAnalytics('enter_wode_zhuanghumx', {
				enter_wode_zhuanghumx: '进入我的_账户明细'
			});
		},
		onShow() {
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 8 });
		},
		methods: {
			initPage() {
				uni.showLoading({
					title: '加载中...'
				});
				
				this.tabList[0].label = '步数明细';
				this.tabList[0].type = 1;
				
				let tabList = [{ label: '权益币明细', type: 2 }, { label: '提现明细', type: 3 }];
				
				tabList.forEach(item => {
					item.loading = false;
					item.finished = false;
					item.error = false;
					item.empty = false;
					item.page = 1;
					item.list = [];
				});
				
				this.tabList = this.tabList.concat(tabList);
				
				this.loadMore(this.tabList[0]);
			},
			beforeLoader(item) {
				this.params.type = item.type;
				this.service = this.$service.common.step.detail(this.params);
				return true;
			},
			toTaobao(item) {
				if (!item.tkl) {
					return false;
				}
				my.navigateToMiniProgram({
					appId: '2018091261350219',
					path: `/pages/h5pages/h5pages?targetURI=${item.tkl}`
				});
			}
		},
		filters: {
			statusFilter(val) {
				switch(val) {
					case 0:
						return '审核中';
					case 1:
						return '审核成功待打款'
					case 2:
						return '审核失败'
					case 3:
						return '提现成功'
					case 4:
						return '提现失败'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.record-list {
			padding: 0 26rpx;
			background: #fff;
			.record-item {
				font-size: 24rpx;
				padding: 20rpx;
				border-bottom: 2rpx solid #F5F5F6;
				.top {
					@include flexBox(space-between, center);
					.left {
						flex: 1;
						overflow-x: auto;
						overflow-y: hidden;
						padding-right: 50rpx;
						.title {
							color: #383042;
							font-size: 28rpx;
							margin-bottom: 4rpx;
							@include ellipsis(1);
						}
						.time {
							font-size: 24rpx;
							color: #717076;
						}
						.trade {
							font-size: 24rpx;
							color: #717076;
						}
					}
					.right {
						height: 100%;
						@include flexBox(center);
						.step {
							font-size: 32rpx;
							color: #4BA1FE;
						}
						.cion {
							font-size: 32rpx;
							color: #4BA1FE;
							@include flexBox(center, center);
							.image {
								width: 28rpx;
								height: 28rpx;
								margin-right: 4rpx;
							}
						}
						.cash {
							font-size: 24rpx;
							color: #717076;
							@include flexBox(center, flex-end, column)
							.amount {
								margin-bottom: 20rpx;
								color: #FF462C;
								font-size: 32rpx;
							}
							.ing {
								color: #4BA1FE;
								border: 2rpx solid #4BA1FE;
								border-radius: 8rpx;
								padding: 6rpx 16rpx;
								background: #EFF6FF;
							}
						}
					}
				}
				.reason {
					margin-top: 10rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					padding: 10rpx 30rpx;
					color: #717076;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
